// 1.1 获取裁剪区域的 DOM 元素
var $image = $("#image");

// 1.2 配置选项
const options = {
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: ".img-preview",
};

// 1.3 创建裁剪区域
$image.cropper(options);

//点击上传能够选图片
$('button:contains("上传")').on("click", function () {
  $("#file").trigger("click");
});

//当file按钮内容更改时,图片也更改

$("#file").on("change", function () {
  let fileObj = this.files[0];
  // console.log(fileObj);
  let url = URL.createObjectURL(fileObj);
  console.log(url);
  $image.cropper("destroy").attr("src", url).cropper(options);
});

//点击确定按钮,上传图片
$('button:contains("确定")').on("click", function () {
  //调用canvas插件
  var canvas = $image.cropper("getCroppedCanvas", {
    width: 100,
    height: 100,
  });
  // 把canvas图片转成base64格式，得到超长字符串
  var base64 = canvas.toDataURL("image/png");
  $.ajax({
    type: "POST",
    url: "/my/update/avatar",
    data: { avatar: base64 },
    success: function (res) {
      layer.msg(res.message);
      if (res.status === 0) {
        window.parent.getuserinfo();
      }
    },
  });
});
